<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        
    },
    methods:{
        handleClick(e:any){
            console.log(e.target.classList)
            //e.target a标签
            let ulDom = e.target.parentNode.parentNode
            ulDom.childNodes.forEach((item:any) => {
                item.classList.remove("active");
            });
            let liDom = e.target.parentNode;
            liDom.classList.add('active');
        }
    }
})
</script>


<template>
    <div class="right-sidebar-box">
        <nav>
            <ul @click="handleClick">
                <li ><router-link to="/">首页</router-link></li> 
                <li ><router-link to="/example">示例</router-link></li> 
                <li ><router-link to="/lifecycle">生命周期</router-link></li> 
                <li ><router-link to="/routeguard">路由守卫</router-link></li> 
            </ul>
        </nav>
        
    </div>
    
</template>

<style lang="scss" scoped>
.right-sidebar-box{
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    padding-right: 199px;
    top:60px;
    width:15%;
    background-color: #f7f7f7;
    nav{
        margin-top:100px;
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
    }
    ul {
        list-style-type: none;
        font-size:17px;
        li.active {
            a {
                color:#3EAF7C;
            }
            a:hover {
                color:#3EAF7C;
            }
        }
        li {
            display: list-item;
            text-align: left;
            margin: 10px 5px;
            a {
                text-decoration: none;
                color:#232323;
                
            }
            a:hover {
                color:#999999;
            }
            a:active {
                color:rgb(85, 26, 139)
            }
        }


    }
}
</style>